<template>
	<div class="flex-container">
		<div class="flex-item left">
			<div class="input-container">
				<input type="text" class="goal-input" placeholder="输入制定的目标" v-model="goal" />
				<button class="goal-button" @click="setGoal">制定目标</button>
				<button class="goal-button" @click="navigateToUrl">访问网站</button>
			</div>
		</div>
		<div class="flex-item right">
			<goalsData></goalsData>
		</div>
	</div>
</template>

<script setup>
	import CryptoJS from 'crypto-js';
	import {
		onMounted
	} from 'vue';
	import goalsData from './decompose/goalsData.vue'
	import {
		wcao,
		post
	} from "@/http";
	import {
		ref
	} from 'vue';

	const goal = ref(''); // 创建一个响应式变量来存储目标
	// 定义处理点击事件的函数
	const setGoal = () => {
		post('/goalscon/add', {
			goal: goal.value
		}, (res) => {
			console.log('接收到后端的返回数据:', res);
			ElMessage.success(res);
		}, (res) => {
			ElMessage.warning(res.message);
		});
	};

	// 定义跳转到特定 URL 的函数
	const navigateToUrl = () => {
		var href = "http:116.62.118.104:8113/#/";
		 var token = generateToken();
		console.log('跳转前打印URL =', href); // 打印点击前的信息
		// 检查 URL 是否包含特定地址
		if (href.includes("116.62.118.104:8113")) {
			// 使用 CryptoJS 加密 token
			console.log('包含118.104');
			var key = CryptoJS.enc.Utf8.parse('a14124faf8bc40ae'); // 16 字节密钥
			var encryptedToken = CryptoJS.AES.encrypt('688a28c9-2073-4296-86e0-8498eb60d23f', key, {
				mode: CryptoJS.mode.ECB,
				padding: CryptoJS.pad.Pkcs7
			}).toString();
			// 附加加密后的 token
			href += (href.indexOf('?') > -1 ? '&' : '?') + 'token=' + encodeURIComponent(encryptedToken);
			location.href = href;
		}else {
			console.log('操作已被禁用');
		}
		console.log('打印点击后的信息=', href); // 打印点击后的信息
	};
	const generateToken = () => {
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < 16; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
	};
</script>

<style scoped>
	.flex-container {
		display: flex;
		/* 使用 flexbox 布局 */
		width: 100%;
		/* 自适应宽度 */
		height: 100%;
		/* 自适应高度 */
	}

	.flex-item {
		margin: 5px;
		/* 添加间距 */
		background-color: #f0f0f0;
		/* 添加背景色 */
		text-align: center;
		/* 文本居中 */
		border-radius: 5px;
		/* 圆角 */
		padding: 20px;
		/* 内边距 */
	}

	.left {
		width: 20%;
		/* 左侧占 20% */
	}

	.right {
		width: 80%;
		/* 右侧占 80% */
	}

	.input-container {
		display: flex;
		/* 使用 flex 布局 */
		flex-direction: column;
		/* 垂直排列输入框和按钮 */
		align-items: center;
		/* 居中对齐 */
	}

	.goal-input {
		width: 80%;
		/* 设置输入框宽度 */
		padding: 10px;
		/* 添加内边距 */
		border: none;
		/* 去掉默认边框 */
		border-radius: 8px;
		/* 圆角 */
		background-color: #e0e0e0;
		/* 设置背景颜色 */
		color: #333;
		/* 字体颜色 */
		font-size: 16px;
		/* 字体大小 */
		margin-bottom: 10px;
		/* 输入框和按钮之间的间距 */
	}

	.goal-button {
		width: 80%;
		/* 设置按钮宽度 */
		padding: 10px;
		/* 添加内边距 */
		border: none;
		/* 去掉默认边框 */
		border-radius: 8px;
		/* 圆角 */
		background-color: #4CAF50;
		/* 设置按钮背景颜色 */
		color: white;
		/* 字体颜色 */
		font-size: 16px;
		/* 字体大小 */
		cursor: pointer;
		/* 鼠标悬停时显示为手指 */
		transition: background-color 0.3s;
		/* 添加过渡效果 */
		margin-top: 10px;
	}

	.goal-button:hover {
		background-color: #45a049;
		/* 悬停时改变按钮背景颜色 */
	}
</style>